import { MoneyCollectOutlined } from '@ant-design/icons';
import { PageContainer, ProCard, ProList } from '@ant-design/pro-components'
import { createFilters, useCtx, useModelTable, useParams } from '@sker/sdk'
import { Button, Spin } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
export const FuliCompanyMoneyDetail: React.FC<{ company_id: string }> = ({ company_id }) => {
    const { params, onChange } = useParams<any>({});
    const { history } = useCtx();
    const [company, setCompany] = useState<any>()
    const model = useModelTable('fuli_company_money_log', 'uuid', 'id')
    const fuliCompany = useModelTable('fuli_company', 'uuid', 'id')
    useEffect(() => {
        if (!company_id) return;
        fuliCompany.getOne(company_id, ['id','money', 'title']).then(res => {
            setCompany(res.data)
            onChange({ company_id })
        })
    }, [company_id])
    const getStatus = (status: string) => {
        switch (`${status}`) {
            case '0':
                return '已驳回'
            case '1':
                return '审核中'
            case '2':
                return '已审核'
            default:
                return '未知'
        }
    }
    if (!company) return <Spin />
    return <PageContainer title={'账户记录'}
        tabActiveKey={params.type}
        onTabChange={e => onChange({ type: e })}
        content={<>
            <div className="flex center bg-#171772 c-#ffffff rounded-8px h-200px">
                <div className="flex center">
                    <div className="text-60px">
                        <MoneyCollectOutlined />
                    </div>
                    <div className="ml-24px flex flex-col">
                        <div className='text-20px'>{company?.title}</div>
                        <div className='text-30px'>{company?.money}</div>
                    </div>
                </div>
            </div>
        </>}
        tabList={[
            { tab: '全部', key: 'all' },
            { tab: '充值记录', key: 'in' },
            { tab: '活动发放', key: 'active.in' },
            { tab: '活动退还', key: 'active.out' },
            { tab: '退款记录', key: 'out' },
        ]}
    >
        <ProList<any> search={false} toolBarRender={false}
            params={params}
            rowKey={'id'}
            request={async (params) => {
                if (!params.company_id) {
                    return {}
                }
                const filters = createFilters();
                filters.push({ field: 'company_id', operator: 'eq', value: params.company_id })
                if (params.type && params.type !== 'all') {
                    filters.push({ field: 'type', operator: 'eq', value: params.type })
                }
                return model.find(['id', 'type', 'money', 'desc', 'create_date', 'status'], [
                    ...filters
                ], [
                    { field: 'create_date', order: 'desc' }
                ], {
                    pageSize: params.pageSize,
                    current: params.current
                })
            }}
            renderItem={(item, index) => {
                if (item.type === 'in') {
                    return <ProCard className='bg-white mt-12px' bordered hoverable title={'充值'} subTitle={<div className='flex'>
                        <span className='c-red text-18px'>+{item.money || 0}</span>
                        <span className='text-14px c-gray ml-24px'>{item.desc}</span>
                    </div>} extra={<>
                        {getStatus(item.status)}
                    </>}>
                        <div className="px-24px">
                            {dayjs(item.create_date).format('YYYY-MM-DD HH:mm:ss')}
                        </div>
                    </ProCard>
                }
                if (item.type === 'out') {
                    return <ProCard className='bg-white mt-12px' bordered hoverable title={'退款'} subTitle={<>
                        <span className='c-red text-18px'>-{item.money || 0}</span>
                        <span className='text-14px c-gray ml-24px'>{item.desc}</span>
                    </>} extra={<>
                        {getStatus(item.status)}
                    </>}>
                        <div className="px-24px">
                            {dayjs(item.create_date).format('YYYY-MM-DD HH:mm:ss')}
                        </div>
                    </ProCard>
                }
                if (item.type === 'active.in') {
                    // 发放
                    const [id, title] = item.desc.split(',')
                    return <ProCard className='bg-white mt-12px' bordered hoverable title={'发放'} subTitle={<>
                        <span className='c-red text-18px'>-{item.money || 0}</span>
                        <span className='text-14px c-gray ml-24px'>
                            活动详情：<Button type={'link'} onClick={e => {
                                history.push('/fuli/company/web/activity_detail?id=' + id)
                            }}>{title || id}</Button>
                        </span>
                    </>} extra={<>
                        {getStatus(item.status)}
                    </>}>
                        <div className="px-24px">
                            {dayjs(item.create_date).format('YYYY-MM-DD HH:mm:ss')}
                        </div>
                    </ProCard>
                }
                return <></>
            }}
        />
    </PageContainer>
}